<!DOCTYPE html>
<html>

<head>
    <!-- 使用纯CSS形状绘制一些形状 -->
    <meta charset="utf-8">
    <title>CSS形状</title>


    <style>
        div {
            display: inline-block;
            margin-right: 50px;
        }

        /* 圆形，常用于显示状态圆点 */
        .circle {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
        }

        /* 三角形，常用于tooltip、下拉框中的小箭头 */
        .triangle {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom-color: red;
        }

        /* 对号，常用于checkbox中 */
        .check {
            box-sizing: content-box;
            content: "";
            border: 10px solid red;
            border-left: 0;
            border-top: 0;
            height: 70px;
            width: 30px;
            transform: rotate(45deg);
        }
    </style>

</head>

<body>
    <div class="circle"></div>
    <div class="triangle"></div>
    <div class="check"></div>

</body>

</html>